<!DOCTYPE html> 
<!--
  Proprietary CSS Sniffer
  A resource for CleanSlateCSS, an extreme CSS reset stylesheet: http://code.google.com/p/cleanslatecss/
  Finds default values for browsers' proprietary CSS properties. Run this page in multiple browsers to find their proprietary values.

  From an original script by Alistair James: http://www.worldreviewer.com
  Adapted by Premasagar Rose: http://premasagar.com
  A Dharmafly project: http://dharmafly.com

  Lisensed under the MIT license:
  http://www.opensource.org/licenses/mit-license.php

-->
<html>
<head> 
  <style>
    body {
      margin:0;
      padding:0.5em 3em;
    }

    #numStylesReport {
      font-weight:bold;
    }

    #css-properties {
      padding:0.5em 1em 0.3em;
      font-family:monospace;
      font-size:1.2em;
      line-height:1.4;
      color:white;
      background-color:black;
      border:none;
    }
  </style> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
</head> 
<body> 
  <h1>Proprietary CSS Sniffer</h1>
  <p class="intro">
    <span id="numStylesReport"><span id="numStyles"></span> proprietary CSS rules were found in your browser.</span> Their default values are shown below.<br />
    <em>(This is a resource for <a href="http://code.google.com/p/cleanslatecss/">CleanSlateCSS</a>, an extreme CSS reset stylesheet).</em>
  </p>
  
  <div class="test"></div>
  
  <div id="results"> 
    <textarea id="css-properties"></textarea> 
  </div> 
  
  <script> 
    // _(args) = Log
    (function(){
      var console = window.console;
      window._ = (console && console.debug && typeof console.debug.apply === 'function') ?
        console.debug : // FF Firebug
        function(){
          var i, args = arguments, log;
          if (console){
            log = console.log;
            if (log){ // Webkit
              if (typeof log.apply === 'function'){
                log.apply(console, args);
              }
              else { // IE8
                $.each(args, function(){
                  log(this);
                });
              }
            }
          }
        };
    })();
 
    // Setup
    var elem, defaultView, styles, numStyles, maxRuleLength, cssText, computedStyle;
    elem = $('.test')[0]; // TODO: multiple test for block-level, inline, table elements
    defaultView = document.defaultView;
    styles = {};
    numStyles = 0;
    maxRuleLength = 0;
    cssText = '';
    
    // W3C
    if (defaultView && defaultView.getComputedStyle){
      computedStyle = defaultView.getComputedStyle(elem, null);
      if (computedStyle){
        $.each(computedStyle, function(){
          // CSS properties beginning with '-'
          if (this.slice(0,1) === '-'){
            styles[this] = computedStyle.getPropertyCSSValue(this).cssText;
          }
        });
      }
    }
    
    // IE
    else if (elem.currentStyle){
      // TODO: Find IE-specific rules, such as filer() rules and so on
    }
    
    // Construct CSS
    $.each(styles, function(prop, val){
      var rule = prop + ':' + ' ' + val + /* ' !important' + ';' + */ '\n';
      cssText += rule;
      // Record max string length of CSS rule, for textarea display
      if (rule.length >  maxRuleLength){
         maxRuleLength = rule.length;
      }
      numStyles++;
    });
    // Remove last line break
    cssText = cssText.replace(/\n$/, '');

    // Report the results
    $('#numStyles').text(numStyles);
    $('#css-properties')
      .attr('rows', numStyles)
      .attr('cols', maxRuleLength + 6) // Why 6? Dunno. But look in Chrome.
      .text(cssText)
      .click(function(){
        this.select()
      });

      // TODO: Use window.navigator.userAgent to log rules for different browsers
  </script> 
</body> 
</html>